<template>
	<view class="wrap">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<!-- 用户信息区域 -->
		<view class="user-header">
			<view class="user-info">
				<view class="avatar">
					<u-icon name="account-fill" color="#999" size="40"></u-icon>
				</view>
				<view class="user-details">
					<text class="username">{{ userInfo.name }}</text>
					<text class="user-level">会员：{{ userInfo.level }}</text>
				</view>
				<view class="crown-icon">
					<text class="crown">👑</text>
				</view>
			</view>
		</view>

		<!-- 功能图标网格 -->
		<view class="function-grid">
			<view class="grid-item" v-for="(item, index) in gridItems" :key="index" @click="handleGridClick(item)">
				<view class="icon-wrapper" :style="{ backgroundColor: item.bgColor }">
					<u-icon :name="item.icon" color="#fff" size="24"></u-icon>
				</view>
				<text class="grid-title">{{ item.title }}</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="function-list">
			<view class="list-item" v-for="(item, index) in listItems" :key="index" @click="handleListClick(item)">
				<view class="item-left">
					<view class="item-icon">
						<text>{{ item.emoji }}</text>
					</view>
					<text class="item-title">{{ item.title }}</text>
				</view>
				<view class="item-right">
					<text class="item-desc" v-if="item.desc">{{ item.desc }}</text>
					<u-icon name="arrow-right" color="#ccc" size="16"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import * as UserApi from '@/api/user'

	export default {
		data() {
			return {
				statusBarHeight: 0,
				userInfo: {},
				gridItems: [
					{
						title: '我的收藏',
						icon: 'star-fill',
						bgColor: '#8B5CF6'
					},
					{
						title: '阅读记录',
						icon: 'file-text-fill',
						bgColor: '#EC4899'
					},
					{
						title: '回收站',
						icon: 'trash-fill',
						bgColor: '#06B6D4'
					},
					{
						title: '个人资料',
						icon: 'account-fill',
						bgColor: '#10B981'
					}
				],
				listItems: [
					{
						title: '购买会员',
						emoji: '💰',
						desc: '畅读所有绘本'
					},
					{
						title: '分享送会员',
						emoji: '💎',
						desc: '可获得终身会员'
					},
					{
						title: '设置',
						emoji: '⚙️',
						desc: '接受屏'
					},
					{
						title: '在线客服',
						emoji: '🎧',
						desc: '工作时间：9:00-21:00'
					},
					{
						title: '退出登录',
						emoji: '📋'
					}
				]
			};
		},
		onLoad() {
			// 获取状态栏高度
      const bar = uni.getSystemInfoSync().statusBarHeight
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.statusBarHeight = menuButtonInfo.top + bar || 0;
			this.getUserInfo();
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			handleGridClick(item) {
				if (item.title === '我的收藏') {
					uni.navigateTo({
						url: '/pages/my/favorites'
					});
				} else if (item.title === '回收站') {
					uni.navigateTo({
						url: '/pages/my/recycle'
					});
				} else if (item.title === '个人资料') {
					uni.navigateTo({
						url: '/pages/user/profile'
					});
				} else if (item.title === '阅读记录') {
					uni.navigateTo({
						url: '/pages/reading/record'
					});
				} else {
					this.$toast(`点击了 ${item.title}`);
				}
			},
			handleListClick(item) {
				if (item.title === '设置') {
					uni.navigateTo({
						url: '/pages/settings/index'
					});
				} else if (item.title === '退出登录') {
					this.handleLogout();
				} else {
					this.$toast(`点击了 ${item.title}`);
				}
			},
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 使用store的Logout action清除登录状态
							this.$store.dispatch('Logout').then(() => {
								// 跳转到登录页面并清空页面栈
								uni.reLaunch({
									url: '/pages/login/index'
								});
							});
						}
					}
				});
			},
			// 获取用户信息
			getUserInfo() {
			  UserApi.info()
			    .then(result => {
			      if (result.code ===0 && result.data) {
			        this.userInfo = {
			          avatar: result.data.avatar,
			          name: result.data.nickname,
					  level: '非会员'
			        }
			      }
			    })
			    .catch(err => {
			      console.error('获取用户信息失败:', err)
			    })
			}
		}
	};
</script>

<style lang="scss">
	.wrap {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.status-bar {
		width: 100%;
		background-color: #4a5568;
	}

	// 用户信息区域
	.user-header {
		background-color: #4a5568;
		padding: 40rpx;
		padding-bottom: 60rpx;
	}

	.user-info {
		display: flex;
		align-items: center;
		position: relative;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #e2e8f0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.user-details {
		flex: 1;
	}

	.username {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		display: block;
		margin-bottom: 10rpx;
	}

	.user-level {
		font-size: 28rpx;
		color: #cbd5e0;
		display: block;
	}

	.crown-icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.crown {
		font-size: 40rpx;
	}

	// 功能图标网格
	.function-grid {
		background-color: #fff;
		padding: 40rpx;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40rpx;
		margin-top: 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.grid-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.grid-title {
		font-size: 24rpx;
		color: #333;
	}

	// 功能列表
	.function-list {
		background-color: #fff;
		margin: 0 20rpx;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 0 40rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f0f0f0;

		&:last-child {
			border-bottom: none;
		}
	}

	.item-left {
		display: flex;
		align-items: center;
	}

	.item-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		font-size: 32rpx;
	}

	.item-title {
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
	}

	.item-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.item-desc {
		font-size: 28rpx;
		color: #999;
	}
</style>
